import "../../../both/base"
require("./PersonSlider.scss")


//首页的轮播图
class PersonSlider extends React.Component{
    constructor(){
        super()

        this.state = {
            sliderIdx : 0
        }
    }

    slideToIdx(idx){
        if(this.props.pictures.length == 0){
            return
        }

        var ul = document.getElementById("slider_content")
        var lists = ul.children

        if(idx > lists.length - 1 || idx < 0){
            return
        }

        Array.prototype.map.call(lists,function(li){
            if(li.className.match(/show/gi)){
                li.className = li.className.replace(/show/gi,"").trim()        // del show
                window.getComputedStyle(li).opacity
                li.className += " hide"
            }
        })

        lists[idx].className = lists[idx].className.replace(/hide/gi,"").trim()        // del hide
        window.getComputedStyle(lists[idx]).opacity
        lists[idx].className += " show"

        var banner_dots = document.getElementById("banner_dots")
        var dots = banner_dots.children
        Array.prototype.map.call(dots,(dot) => {
            if(dot.className.match(/active/gi)){
                dot.className = dot.className.replace(/active/gi,"").trim()
            }
        })
        dots[idx].className += " active"

        this.state.sliderIdx = idx
    }

    componentDidMount(){
        var self = this
        var i = 0
        var ul = document.getElementById("slider_content")
        var lists = ul.children

        setInterval(() => {
            i = ++i % lists.length
            self.state.sliderIdx = i
            self.slideToIdx(i)
        },4000)
    }

    render(){
        var self = this
        const sliders = this.props.pictures.map((e,i) => {
            return <li key={e.id} className={ i == 0 ? "pictures_item show" : "pictures_item hide" }>
                <a className="pictures_href" href={e.href}><img className="lazy" src={e.img} /></a>
            </li>
        })

        const banner_dots = this.props.pictures.map((e,i) => {
            return <span key={i} className={ i == 0 ? "active" : null} />
        })

        return (
            <div className="person_slider_cr bln">
                <div className="banner_dots" id="banner_dots">
                    {banner_dots}
                </div>
                <div className="slider_angle left" onClick={(e) => {
                    return self.slideToIdx((self.state.sliderIdx - 1) % sliders.length)
                }}></div>
                <div className="slider_angle right" onClick={(e) => {
                    return self.slideToIdx((self.state.sliderIdx + 1) % sliders.length)
                }}></div>
                <ul className="slider_content" id="slider_content">
                    {sliders}
                </ul>
            </div>
        )
    }
}

export default PersonSlider